<!--
 * @Date: 2022-04-06 10:34:30
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-24 16:04:01
 * @FilePath: \weibovue\src\views\Home\index.vue
 * @Description: 首页显示
-->
<template>
  <headerActive :is-show="headerShow"></headerActive>
  <loading v-if="isShowLoading"></loading>
  <div class="boxContainer">
    <headerBG></headerBG>
    <div class="mainBox">
      <div class="aside shitfY" v-if="isLogin">
        <aside-list></aside-list>
      </div>
      <div class="centerArea">
        <div class="showMain">
          <router-view></router-view>
        </div>
      </div>
      <div class="UserCardright shitfY">
        <div>
          <userCard></userCard>
        </div>
        <div class="copyright">
          <div class="link">
            <div><i class="iconfont icon-xiangmu"></i><i>关于这个项目</i></div>
            此项目前后端全部都开源在<a
              href="https://gitee.com/chen-jiachuan/imitation-microblog-vue/tree/master"
              target="blank"
              >我的仓库</a
            >
          </div>

          <div class="link">
            <div><i class="iconfont icon-person"></i><i> sailornpg</i></div>
            我的博客地址在<a href="http://120.26.45.195/" target="blank"
              >这里</a
            >
          </div>
          <div class="link">
            <div>
              <i class="iconfont icon-beian"></i><i> 琼ICP备2021008117号 </i>
            </div>
          </div>
          <div class="link">
            <div>
              <i class="iconfont icon-shangban"></i><i> 2022/4/23 16:33 </i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <GoTop></GoTop>
  </div>
</template>
<script lang="ts" setup>
import loading from "../../components/loading.vue";
import { computed, provide, ref, watch } from "vue";
import headerBG from "@/components/headerBG.vue";
import userCard from "../../components/userCard.vue";
import headerActive from "@/components/headerActive.vue";
import GoTop from "../../components/GoTop.vue";
import useScroll from "../../hooks/useScroll";
import asideList from "../../components/asideList/index.vue";
import { useStore } from "vuex";
const store = useStore();
//头部显示
let headerShow = ref(false);
let isShowLoading = computed(() => store.state.isLoading);
let isLogin = computed(() => store.state.isLogin);
const { isFlag } = useScroll(900);
//传入value就不是响应式数据，所以直接传整个过去
provide("isFlag", isFlag);
//监听页面滚动高度
watch(
  () => isFlag.value,
  (val) => {
    headerShow.value = val;
  },
);
</script>

<style lang="less" scoped>
.boxContainer {
  background: url("../../assets/image/body_bg.jpg");
  background-size: 100% 100%;
  background-attachment: fixed;
  .mainBox {
    display: flex;
    justify-content: space-between;
    // height: 80vh;
    position: relative;
    max-width: 1400px;
    margin: 10px auto 0 auto;

    .centerArea {
      margin: 0 10px;
      flex: 1;

      .header {
        width: 100%;
        height: 2.75rem;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        background-color: #fff;

        .headerItem {
          width: 100%;
          margin: 0 4px;
          padding: 5px;
          border-radius: 15px;
          line-height: 20px;
          text-align: center;
          cursor: pointer;
          font-size: 14px;
          border-radius: 20px;

          &:hover {
            background-color: #fff2e5;
            color: #ff8200;
          }
        }
      }

      .showMain {
        :deep(.test) {
          width: 20px;
          height: 20px;
          background-color: aliceblue;
        }
      }
    }

    .aside {
      height: 100vh;
    }

    .UserCardright {
      width: 270px !important;
      height: 50vh;
      background-color: aquamarine;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .copyright {
        flex: 1;
        background-color: #fff;
        border-top: 1px solid #f2f2f2;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .iconfont {
          margin-right: 10px;
        }
        .link {
          padding: 10px 20px;
          a {
            color: #ff8200;
          }
          & > div {
            padding: 5px;
          }
        }
      }
    }
  }
}

.shitfY {
  position: sticky;
  top: 65px;
}
</style>
